<template>
  <div class="infoList">
    <!-- 搜索 -->
    <div class="section">
      <h3>资讯攻略</h3>
      <search-item @searchList="searchData" @showaddinfoDialog="showaddinfoDialog"></search-item>
    </div>
    <!-- 表格 -->
    <el-table
      :height="tabHeight"
      border
      style="width: 99%"
      align="center"
      :data="tableData"
      v-loading="loading"
    >
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="app_id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="游戏名" width="180"></el-table-column>
      <el-table-column prop="post_type" label="资讯类型" width="80"></el-table-column>
      <el-table-column prop="post_title" label="资讯名称"></el-table-column>
      <el-table-column prop="post_date" label="创建时间" width="160"></el-table-column>    
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status===0" type="text" size="small" style="color:#D7DAE2">编辑</el-button>
          <el-button type="text" v-else size="mini" @click="editInfo(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagenationData.currentPage"
        :page-size="pagenationData.pageSize"
        :total="pagenationData.pageTotal"
        background
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
    <!-- 添加游戏 -->
    <AddInfo
      v-if="addinfodialog.show"
      :isShow="addinfodialog.show"
      :dialogRow="addinfodialog.dialogRow"
      @closeDialog="hideaddinfoDialog"
    ></AddInfo>
    <!-- 编辑 -->
    <EditInfo
      v-if="editInfodialog.show"
      :isShow="editInfodialog.show"
      :dialogRow="editInfodialog.dialogRow"
      :cpId="cpId"
      @closeDialog="hideeditInfoDialog"
    ></EditInfo>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import SearchItem from "./component/searchItem";
import AddInfo from "./component/addInfo";
import EditInfo from "./component/editInfo";

import { getInfoList, editInfoList } from "@/api/infoManage";
export default {
  inject: ["reload"],
  data() {
    return {
      tabHeight: window.innerHeight - 200,
      search: {},
      tableData: [],
      loading: true,
      addinfodialog: {
        show: false,
        dialogRow: {}
      },
      editInfodialog: {
        show: false,
        dialogRow: {}
      },

      pagenationData: {
        pageTotal: 0,
        currentPage: 1,
        pageSize: 20
      },
      pageData: {
        page: 1,
        limit: 20
      },
      cpId:""
    };
  },
  components: {
    SearchItem,
    AddInfo,
    EditInfo
  },
  mounted() {
    this.getInfoList();
  },
  methods: {
    searchData(search) {
      this.search = search;
      this.search.page = 1;
      this.pagenationData.currentPage = 1;
      this.searchList();
    },
    // 搜索数据
    searchList() {
      this.loading = true;
      const para = Object.assign({}, this.search);
      getInfoList(para).then(res => {
        this.loading = false;
        this.pagenationData.pageTotal = res.data.count;
        this.tableData = res.data.list;
      });
    },
    // 获取数据列表
    getInfoList() {
      const para = Object.assign({}, this.pageData);
      getInfoList(para).then(res => {
        this.loading = false;
        this.cpId=res.data.cpId;
        this.pagenationData.pageTotal = res.data.count;
        this.tableData = res.data.list;
      });
    },
    hideaddinfoDialog() {
      this.addinfodialog.show = false;
    },
    showaddinfoDialog(data) {
      // this.addinfodialog.dialogRow = Object.assign({}, data);
      this.addinfodialog.show = true;
    },

    // 上下分页
    handleCurrentChange(val) {
      this.pageData.page = val;
      this.search.page = val;
      this.searchList();
    },
    editInfo(row) {
      const para = Object.assign({}, { pid: row.id });
      editInfoList(para).then(res => {
        this.editInfodialog.dialogRow = res.data;
        this.editInfodialog.show = true;
      });
    },
    hideeditInfoDialog() {
      this.editInfodialog.show = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.infoList {
  .linkgame {
    display: inline-block;
    width: 168px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .cell {
    .el-button--mini,
    .el-button--mini.is-round {
      padding: 5px 6px;
    }
  }
}
</style>